<template>
  <div >
  <div class="swiper" style="margin-top: 10px;overflow: hidden">
    <div class="swiper-wrapper"  >
      <div class="swiper-slide" v-for="img in imgsList" :key="img.argetId">
        <img :src="img.pic" alt="" >
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" style="position: absolute;top: 2.5rem"></div>
  </div>
  </div>
</template>

<script>
import Swiper from "swiper"
import 'swiper/dist/css/swiper.min.css'
import {getSwiper} from "../../../HTTP/api";
import  axios from 'axios'
export default {
  name: 'Aide',
  data(){
    return{
      imgsList:""
    }
  },
  mounted() {
      this.findSwiper()
  },
  methods:{
    findSwiper(){
      getSwiper({type:1}).then(values=>{
        console.log(values.banners)
        this.imgsList=values.banners;
        this.$nextTick(()=>{
          this.doSwiper()
        })
      })
    },
    doSwiper(){
      new Swiper('.swiper', {
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        loop: true, // 循环模式选项
        autoplay: { // 可选选项，自动滑动
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
      })
    }
  }
}
</script>
<style scoped>
.swiper-slide img{
  height: 3rem;
  width: 100%;
  border-radius: 0.15rem;
}
.swiper{
  height: 3rem;

}
.swiper-wrapper{
  height: 3rem;


}
.swiper-slide{
  height: 3rem;
}
.swiper-pagination{
  height: 0.5rem;

}

</style>